﻿<%@page language="java" contentType="text/html" pageEncoding="UTF-8"%>

<script>
	var selectId = '';
	var datas = {};
	var dataUpdate = {};
	var addWebsite = "<span class='icon-plus-2'>&nbsp;</span>เพิ่มเว็บไซต์ที่เกี่ยวข้อง";
	var updateWebsite = "<span class='icon-pencil'>&nbsp;</span>แก้ไขเว็บไซต์ที่เกี่ยวข้อง";
	$(function(){
		$("#btnUpdate").hide();
		$("#headerPanel").html(addWebsite);
		$("#txtName").focus();
		$(document).ready(function(){
			$.ajax({
	            url : '${pageContext.request.contextPath}/backend/websites/getAll',
	            type: "POST",
	            async: false,
	            success : function(data) {
					if(data.success){
						var tbody = "";
						if(data.code === "0000"){
							datas = data.datas;
							$.each(data.datas, function(key, value) {
								var i=key;
								var status = "";
								if(value.status === 1){
									status = "ใช้งาน";
								}else{
									status = "ไม่ใช้งาน";
								}
								key = key + 1;
								tbody += "<tr>";
								tbody += "<td>" + key + "</td>";
								tbody += "<td align='left'>" + value.name + "</td>";
								tbody += "<td align='left'>" + value.description + "</td>";
								tbody += "<td align='left'><a href='" + value.url + "' class='link' target='_blank'>" + value.url + "</a></td>";
								tbody += "<td>" + status + "</td>";
								//tbody += "<td><span class='link on-left pointer-cursor' onclick='updateData("+i+")'><span class='icon-pencil'></span></span>" + 
									//"<span class='link pointer-cursor' onclick='deleteData("+i+")'><span class='icon-remove'></span></span></td>";
								tbody += "<td><span class='pointer-cursor' onclick='updateData("+i+")'><span class='glyphicon glyphicon-pencil'></span></span>&nbsp;&nbsp;" + 
									"<span class='pointer-cursor' data-toggle='modal' data-target='#myModal' onclick='deleteData("+value.id+")'><span class='glyphicon glyphicon-trash'></span></span></td>";
								tbody += "</tr>";
							});
						}else{
							tbody += "<tr>";
							tbody += "<td colspan='6' align='center' class='required'>" + data.msg + "</td>";
							tbody += "</tr>";
						}
						
						$("#tableWebsites tbody").append(tbody);
					}else{
	            		$.alert(data.code, data.msg);
					}
	            },
	            error : function(data){
	            	$.alert(data.code, data.msg);
	            }
	        });
		});
		
		$("#btnCancel").click(function(){
			$("#headerPanel").html(addWebsite);
			$("#btnUpdate").hide();
			$("#btnSubmit").show();
			$("input[id^='txt'").val("");
			$("#chkStatus").prop("checked", true);
		});
		
		$("#btnSubmit, #btnUpdate").click(function(){
			var id = $(this).attr("id");
			var status = $("#chkStatus").prop("checked") ? 1 : 0;
			var name = $("#txtName").val();
			var data = {};
			var url = "${pageContext.request.contextPath}/backend/websites/add";		
			if(name === ""){
				$.alert("Warning", "โปรดระบุชื่อ");
				return false;
			}
			if($("#txtURL").val() === ""){
				$.alert("Warning", "โปรดระบุ URL");
				return false;
			}
			data = {name: name, description: $("#txtDescription").val(), url: $("#txtURL").val(), status: status};
			if(id === "btnUpdate"){
				url = "${pageContext.request.contextPath}/backend/websites/update";
				data = {id: dataUpdate.id, name: name, description: $("#txtDescription").val(), url: $("#txtURL").val(), status: status,
					createdBy: dataUpdate.createdBy, createdDate: dataUpdate.createdDate
				};
			}
			
			$.ajax({
	            url : url,
	            data: JSON.stringify(data),
	            type: "POST",
		        contentType: 'application/json',
		        //dataType: 'json',
	            success : function(data) {
					if(data.success){
						if(data.code === "0000"){
	            			$.alert(data.code, data.msg);
						}else{
	            			$.alert(data.code, data.msg);
						}
					}else{
	            		$.alert(data.code, data.msg);
					}
	            },
	            error : function(data){
	            	$.alert(data.code, data.msg);
	            },
	            complete: function(data){
					window.location.reload(true);
	            }
	        });
		});
	});
		
	function updateData(key){
		dataUpdate = datas[key];
		$("#headerPanel").html(updateWebsite);
		$("#btnUpdate").show();
		$("#btnSubmit").hide();
		
		$("#txtName").val(dataUpdate.name);
		$("#txtDescription").val(dataUpdate.description);
		$("#txtURL").val(dataUpdate.url);

		if(dataUpdate.status === 1){		
			$("#chkStatus").prop("checked", true);
		}else{
			$("#chkStatus").prop("checked", false);
		}
		
	}
		
	function deleteData(key){
		//dataUpdate = datas[key];
		selectId = key;
		$.Dialog({
			width: 250,
			overlay: true,
			shadow: true,
			flat: true,
			icon: '<div class="fg-black icon-warning"></div>',
			title: '<div class="fg-black bold" style="font-weight: bold;">ยืนยันลบข้อมูล</div>',
			content: $("#dlgDelete").html(),
			sysButtons:{
				btnClose: false
			}
		});
	}
		
	function remove_item(){
		$.ajax({
            url : "${pageContext.request.contextPath}/backend/websites/delete",
            //data: JSON.stringify(dataUpdate),
            data: {id: selectId},
            type: "POST",
	        //contentType: 'application/json',
	        //dataType: 'json',
            success : function(data) {
				if(data.success){
					if(data.msg === "success"){
            			$.alert(data.code, data.msg);
						window.location.reload(true);
					}else{
            			$.alert(data.code, data.msg);
					}
				}else{
            		$.alert(data.code, data.msg);
				}
            },
            error : function(data){
            	$.alert(data.code, data.msg);
            }
        });
	}
</script>



<div class="panel-box">
    <div class=titlebar>
        <span class="glyphicon glyphicon-link"></span> เว็บไซต์ที่เกี่ยวข้องทั้งหมด
    </div>
    <div class="panel-body">
    	<table width="100%" id="tableWebsites" class="table table-striped">
			<thead>
				<tr class="info">
					<td width="50px">ลำดับ</td>
					<td>ชื่อ</td>
					<td width="350px">รายละเอียด</td>
					<td width="250px">URL</td>
					<td width="100px">สถานะ</td>
					<td width="80px">Actions</td>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>
    </div>
</div>

<div class="panel-box">
	<div class="titlebar" id="headerPanel"></div>
	<div class="panel-body">
		<div style="width: 700px">
			<div class="form-horizontal">					
			    <div class="form-group">
					<label class="col-sm-2 control-label" for="txtName">ชื่อ: </label>
    				<div class="col-sm-10">
						<input type="text" id="txtName" name="txtName" class="form-control" >
					</div>
				</div>
			    <div class="form-group">
					<label class="col-sm-2 control-label" for="txtDescription">รายละเอียด: </label>
    				<div class="col-sm-10">
						<textarea rows="5" cols="100" class="form-control" id="txtDescription" name="txtDescription" style="overflow: auto; resize: none;"></textarea>
					</div>
				</div>	
			    <div class="form-group">
					<label class="col-sm-2 control-label" for="txtURL">URL: </label>
    				<div class="col-sm-10">
						<input type="text" id="txtURL" name="txtURL" class="form-control" >
					</div>
				</div>
			    <div class="form-group">
					<label class="col-sm-2 control-label" for="chkStatus">สถานะ: </label>
    				<div class="col-sm-10">
						<input type="checkbox" id="chkStatus" name="chkStatus" checked="checked">
					</div>
				</div>
			
				<div style="margin-top: 10px;">
					<button class="btn btn-primary" type="button" id="btnSubmit" name="btnSubmit">ตกลง</button>
					<button class="btn btn-primary" type="button" id="btnUpdate" name="btnUpdate">ตกลง</button>
					<button class="btn btn-default" type="button" id="btnCancel" name="btnCancel">ล้างข้อมูล</button>
				</div>
				<input type="hidden" id="id" name="id">
				<input type="hidden" id="order" name="order">
			</div>
		</div>
	</div>
</div>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<form action="${pageContext.request.contextPath}/backend/websites" onsubmit="return remove_item()" method="post" >
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="myModalLabel">ต้องการลบข้อมูล?</h4>
				</div>
				<div class="modal-body">
					ยืนยันลบข้อมูล
				</div>
				<div class="modal-footer">
					<button type="submit" class="btn btn-primary">ตกลง</button>
					<button type="button" class="btn btn-default" data-dismiss="modal">ปิด</button>
				</div>
			</div>
		</div>
	</form>
</div>	
